<template>
  <div
    v-for="(item, index) in orgroles"
    :key="index"
    class="org-role-select"
  >
    <DeptFormSelect
      :disable="true"
      ref="deptFormSelect"
      :emit-path="true"
      :name="item.orgName"
      :placeholder="`请选择组织`"
      v-model:dept="item.orgId"
    />
    <el-select v-model="item.roleId" placeholder="请选择角色">
      <el-option
        v-for="item in roles"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
    <!-- <el-button type="primary" plain @click="deleteLine(index)">
      <el-icon>
        <delete />
      </el-icon>
    </el-button> -->
  </div>
  <!-- <el-button type="primary" plain @click="addLine(index)">
    <el-icon>
      <plus />
    </el-icon>
    新增组织关系
  </el-button> -->
</template>

<script>
import { getRoleList } from "@/api/system";
import OrgSelect from "@/components/OrgSelect/";
import OrgCascader from "@/components/OrgCascader/";
import DeptFormSelect from "@/components/DeptFormSelect/";
import { Delete, Plus } from "@element-plus/icons-vue";
export default {
  name: "OrgRoleSelect",
  components: {
    OrgSelect,
    OrgCascader,
    DeptFormSelect,
    Delete,
    Plus,
  },
  emits: ["update:orgroles"],
  props: {
    orgroles: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      value1: "",
      value2: "",
      roles: [],
    };
  },
  mounted() {
    if (this.orgroles.length === 0) {
      this.$emit("update:orgroles", [
        {
          orgId: "",
          roleId: "",
        },
      ]);
    }
    this.initRolesList();
  },
  methods: {
    async initRolesList() {
      const res = await getRoleList();
      this.roles = res.data;
    },

    addLine() {
      const newOrgRoles = [...this.orgroles];
      newOrgRoles.push({ orgId: "", roleId: "" });
      this.$emit("update:orgroles", newOrgRoles);
    },

    deleteLine(index) {
      const newOrgRoles = [...this.orgroles];
      newOrgRoles.splice(index, 1);
      this.$emit("update:orgroles", newOrgRoles);
    },
  },
};
</script>

<style lang="scss" scoped>
.org-role-select {
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
}
</style>